<template>
    <div class="setComponent">
        <div class="form-item">
            <label>Tab标签的位置</label>
            <el-select v-model="obj.tabPosition" placeholder="请选择">
                <el-option
                    v-for="(item,index) in tabPositionOptions"
                    :key="index"
                    :label="item"
                    :value="item"/>
            </el-select>
        </div>
        <div class="form-item">
            <label>Tab样式</label>
            <el-select v-model="obj.tabType" placeholder="请选择">
                <el-option
                    v-for="(item,index) in tabType"
                    :key="index"
                    :label="item"
                    :value="item"/>
            </el-select>
        </div>
        <div class="form-item">
            <label>Tab容器高度</label>
            <el-slider v-model="obj.height" :min="100" :max="1000"/>
        </div>
        <div class="form-item">
            <label>Tab容器内边距</label>
            <el-slider v-model="obj.padding" :min="0" :max="100"/>
        </div>

    </div>
</template>
<script>
export default {
    name: 'SetTab',
    props: {
        obj: {
            type: Object

        }
    },
    data() {
        return {
            tabPositionOptions: [
                'left',
                'top',
                'bottom',
                'right'
            ],
            tabType: [
                'card',
                'border-card',
                'line'
            ]
        }
    },
    methods: {

    }
}
</script>
<style lang="scss" scoped>

</style>

